JavaScript上

匡思进2025-04-012025-07-20

认识JavaScript

定义：

JavaScript是一种高级的、解释型的编程语言
JavaScript是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程序设计，指令式编程，以及函数式编程

JavaScript的组成

JavaScript的组成包括ECMAScript、DOM、BOM

ECMAScript：定义语言规范
DOM：用于操作文档的API
BOM：用于操作浏览器的API

JavaScript的基本语法

JavaScript编写方式

第一种：HTML代码行内（不推荐）

<!-- 第一种：HTML代码行内 -->
  <a href="javascript:alert('百度一下')">百度一下</a>
  <a href="#" onclick="alert('百度一下')">百度一下</a>

第二种：script标签中

<!-- 第二种：script标签中 -->
  <a href="#" class="google">google一下</a>
  <script>
    const googleEl = document.querySelector(".google")
    googleEl.onclick = function() {
      alert("google一下")
    }
  </script>

第三种：外部的文件
- 需要通过script元素的scr属性来引入JavaScript文件

<!-- 第三种：外部的script文件 -->

  <a href="#" class="bing">bing一下</a>

  <script src="./JS/01_编写.js"></script>

const bingEl = document.querySelector(".bing")
    bingEl.onclick = function() {
      alert("bing一下")
}

noscript元素

如果运行的浏览器不支持JavaScript，我们使用<noscript>元素来给用户更好的提示

浏览器显示包含在<noscript>中内容的情况：
- 浏览器不支持脚本
- 浏览器对脚本的支持被关闭

<body>
	<noscript>
		<p>您的浏览器不支持JavaScript<p>
	<noscript>
<body>

Javscript 的编写注意事项

注意一：script元素是双标签元素，不能写成单标签
- 在外联式引用js文件时，script标签中不可以写JavaScript代码，而且script标签不能写成单标签
注意二：省略type属性
注意三：加载顺序
- JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序
- 推荐将JavaScript代码和编写位置放在body子元素的最后一行
JavaScript代码严格区分大小写

JavaScript语句和分号

编写的每一行代码都是一个语句
通常每条语句的后面会添加一个分号，表示语句的结束
- 存在换行符时，大多数情况下可以省略分号，JavaScript将换行符理解成“隐式”的分号，也被称之为 自动插入分号

JavaScript的注释

JavaScript的注释主要分为三种
- 单行注释
- 多行注释
- 文档注释（VScode中需要再单独的js文件中编写才有效）
  ![[Pasted image 20240515133954.png]]![[Pasted image 20240515134002.png]]
  注意：不支持注释的嵌套

JavaScript变量和数据类型

变量的命名格式

在JavaScript中命名一个变量包含两部分
- 变量的声明：使用var关键字在JavaScript中声明一个变量
- 变量的赋值：使用 = 给变量进行赋值
  ![[Pasted image 20240515143237.png]]
  ![[Pasted image 20240515143305.png]]
  ![[Pasted image 20240515143315.png]]

变量的命名规范

变量命名规则
- 第一个字符必须是*一个字母、下划线(_)或一个美元符号($)
- 不能使用关键字和保留字命名
- 变量严格区分大小写
变量命名规范
- 多个单词使用驼峰标记（小驼峰：userName,大驼峰：UserName）
- 赋值 = 两边加上一个空格
- 变量应该见名知意

变量的注意事项

一：如果一个变量未声明就直接使用，会报错
二：如果一个变量有声明，但是没有赋值，那么默认值是undefined
三：如果没有使用var声明变量也可以，但是不推荐（实际会被添加到Windows对象上）

JavaScript的数据类型

JavaScript中的值都有特定的类型
- 可以将 值赋值给一个变量，那么这个变量就具备了特定的类型
- 一个变量可以在前一刻是字符串，下一刻是数字
8种基本数据类型
- **Number
- **String
- **Boolean
- **Undefined
- **Null
- **Object
- Biglnt
- Symbol

Number类型

Number类型代表整数和浮点数
Number有很多操作符，如乘法*、除法/、加法+、减法-等等
特殊数值
- infinity：代表无穷大
- NaN：代表计算错误，如字符串和一个数字相乘
其他进制表示方法：
![[Pasted image 20240515194724.png]]
数字表示的范围：
- 最小数：Number.MIN_VALUE，这个值为：5e-324，小于这个的数字会被转化为0
- 最大数：Number.MAX_VALUE，这个值为1.7976931348623157e+308
- 最小整数：Number.MIN_SAFE_INTEGER，这个值为 -(2^53 - 1)
- 最大整数：Number.MAX_SAFE_INTEGER，这个值为 (2^53 - 1)
isNaN
- 用于判断是否是一个数字，是数字返回true，不是数字返回false
实例方法：
- toString(base)：将数字转成字符串，并且按照base进制进行转化
  - base的范围从2-36，默认情况是10
  - 注意：如果是直接对一个数字操作，需要使用 .. 运算符
- toFixed(digits)：格式化一个数字（格式化后生成String类型），保留digits位的小数
  - digits的范围是0-20

1
2
3

var num = 123
console.log(num.toString(2)) //1111011
console.log(123..toString(2)) //1111011

类方法：
- Number.parseInt(string[,radix])：将字符串解析成整数
- Number.parseFloat(string)：将字符串解析成浮点数

1
2
3

var num = "123.321"
console.log(Number.parseInt(num)) //123
console.log(Number.parseFloat(num)) //123.321

String类型

JavaScript中的字符串必须被括在引号里
- 双引号：”hello”
- 单引号：’hello’
- 反引号：hello(ES6之后学)
  ![[Pasted image 20240515195916.png]]
前后引号类型必须一致
- 如果字符串里面本身包括单引号，可以使用双引号
- 如果字符串里面本身包括双引号，可以使用单引号
转义字符：
- 有一些特殊功能的字符可以通过转义字符的形式放入字符串中
  ![[Pasted image 20240515200147.png]]
字符串的几个基本使用操作：
- 字符串拼接，通过+运算符![[Pasted image 20240515200348.png]]
- 获取字符串长度![[Pasted image 20240515200411.png]]
访问字符串的字符
- 方法一：通过字符串的索引 str[0]
- 方法二：通过str.charAt(pos)
- 区别：方法一没有找到会返回undefined，charAt没找到会返回空字符串
字符串的遍历
- 方法一：普通for循环
- 方法二：for .. of遍历(只有字符串和数组能这样遍历)

var ms = "Hello World"

for (var i = 0; i < ms.length; i++) {
	console.log(ms[i])
}

for (var char of ms) {
	console.log(char)
}

修改字符串
- toLowerCase：将所有的字符转成小写
- toUpperCase：将所有的字符转成大写

var ms = "Hello World"

var ms1 = ms.toLowerCase() //hello world
var ms2 = ms.toUpperCase() // HELLO WORLD

console.log(ms, ms1, ms2)

查找字符串
- 方法一：**查找字符串的位置：str.indexOf(searchValue [, fromIndex])
  - 从fromIndex开始，查找searchValue的索引
  - 没有找到返回-1，找到返回单词第一个字母的索引
  - lastIndexOf，从最后开始查找
- 方法二：**是否包含字符串：str.includes(searchString [, position])
  - 从position位置开始查找searchString，返回true或false
  - ES6新增的方法
- 方法三：**以xxx开头：str.startWith(searchString [, position])
  - 从position位置开始，判断字符串是否以searchString开头
  - ES6新增
- 方法四：**以xxx结尾：str.endWith(searchString [, length])
  - 在length长度内，判断字符串是否以searchString结尾
- 方法五：**替换字符串：str.replace(regexp|substr, newSubStr|function)
  - 查找到对应的字符串，并且使用新的字符串进行替代
  - 也可以传入一个正则表达式来查找，也可以传入一个函数来替换
获取子字符串![[Pasted image 20240520155559.png]]
拼接字符串：**str.concat(str2, [, …strN])
删除首尾空格：**str.trim()
字符串分割：**str.split([separator[, limit]])
- separator：以什么字符串进行分割，也可以是一个正则表达式
- limit：限制返回片段的数量
  查看文档： String - JavaScript | MDN (mozilla.org)

Boolean类型

Boolean类型用于表示真假
仅包含两个值：true和false

Undefined类型

Undefined类型只有一个值，就是特殊值undefined
- 如果声明一个变量没有对其进行初始化，则默认值就是Undefined
两个注意事项
- 最好在定义变量的时候进行初始化
- 不要将一个变量赋值为undefined
  - 如果变量刚开始什么都没有，我们可以初始化为0、空字符串、null等值

Object类型

Object往往可以表示一组数据，是其他数据的一个集合
在JavaScript中可以使用花括号{}的方式来表示一个对象![[Pasted image 20240515203651.png]]

Null类型

Null类型通常用来表示一个对象为空，常常在给一个对象进行初始化时，会赋值为null

数据类型的转换

字符串string的转换

方式一：隐式转换
- 一个字符串和其他类型进行+操作
  - 如果+运算符左右两边有一个是字符串，那么另一边会自动转换成字符串类型进行拼接
- 某些函数的执行也会自动将参数转为字符串类型，比如consloe.log函数
方式二：显示转换
- 调用String()函数
- 调用toString()方法

Number的转换

方式一：隐式转换
- 在算术运算中，通常会将其他类型转换成数字类型来进行运算
  - 比如 ”6“ / ”2“
  - 但是如果是+运算，并且其中一边是字符串，那么还是按照字符串来连接
方式二：显示转换
- 调用Number()函数
其他类型转换数字规则![[Pasted image 20240515210345.png]]

Boolean的转换

发生在 逻辑运算中，也可以通过调用Boolean()显示地进行转换
转换规则：
- 直观上为空的值（0、空字符串、null、undefined和NaN）将变为false
- 其他值变为true![[Pasted image 20240515210631.png]]
- 注意：包含0的字符串“0”是true

typeof操作符

typeof操作符用来 确定任意变量的数据类型
返回值：
- undifined表示值未定义
- bollean表示值为布尔值
- string表示值为字符串
- number表示值为数值
- object表示值为对象或null
- function表示值为函数
- symbol表示值为符号
typeof():
- typeof(x)与 typeof x 相同，() 只是将后续内容当做一个整体

JavaScript函数

已经接触的函数
- alert函数：浏览器弹出一个弹窗
- prompt函数：在浏览器弹窗中接收用户的输入
- console.log函数：在控制台输入内容
声明函数使用function关键字
function 函数名() {
代码
}
arguments参数
- 默认情况下， arguments对象是所有（非箭头）函数中都可以用的 局部变量
- 该对象中存放着所有的 调用者传入的参数，从0位置开始，依次存放
- arguments变量的类型是一个 object类型，而非一个数组
- 如果调用者传入的参数多于函数接收的参数，可以通过arguments去获取所有的参数
函数表达式

1
2
3

var foo = function () {
	console.log("foo函数")
}

注意：function关键字后面没有函数名
函数都是一个值（值的类型是一个对象）

JavaScript头等函数

头等函数是指在程序设计语言中，函数被当作头等公民
- 这意味着函数可以 作为别的函数的参数、函数的返回值、赋值给变量或存储在数据结构中
例如：函数可以在变量和变量之间相互进行赋值

function foo() {
console.log("foo函数执行")
}

var bar = foo
bar()

回调函数

函数可以传递给另一个函数

function foo(fn) {
	fn()
}
function bar() {
	console.log("我是bar函数被调用")
}
foo(bar)

回调函数的案例

function request(url, callback) {
	console.log("根据URL向服务器发送网络请求")
	console.log("需要花费比较长的时间拿到对应的结果")
	var list = ["javascript", "javascript学习", "javascript高级编程"]
	callback(list)
}

request("url", function (res) {
	console.log("拿到结果:", res)
})

高阶函数：
- 接受 一个或多个函数作为输入
- 输出一个函数
匿名函数：
- 在传入一个函数时，我们没有指定这个函数的名词或者通过函数表达式指定函数对应的变量

立即执行函数

一个函数定义完后被立即执行
- 第一部分：定义一个匿名函数，这个函数有自己独立的作用域
- 第二部分：后面的 () 表示这个函数被执行了

//常用写法(只掌握这个写法)
(function() {
	console.log("立即执行函数")
})()

//匿名写法
(function(fn) {
	console.log("立即执行函数")
}());

作用：会创建一个独立的执行上下文环境，避免外界访问或修改内部的变量
应用场景一：避免变量命名重复造成内容被覆盖
应用场景二：点击按钮显示点击的第几个按钮

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <button class="btn">按钮1</button>
  <button class="btn">按钮2</button>
  <button class="btn">按钮3</button>
  <button class="btn">按钮4</button>
  
  <script>
    
    // 获取所有的按钮监听
    var btnEls = document.querySelectorAll(".btn")

    for (var i = 0; i < btnEls.length; i++) {
      var btn = btnEls[i];
      (function(m) {
        btn.onclick = function() {
          console.log(`按钮${m + 1}发生了点击`)
        }
      })(i)
    }

  </script>

</body>
</html>

JavaScript的面向对象

对象类型是一种 存储键值对（key-value） 的更加复杂的数据类型
对象类型可以 使用{…} 来创建，里面包含的是键值对
键值对 可以是 属性和方法
其中 key是字符串， value可以是任意类型，包括基本数据类型、函数类型、对象类型等

创建对象

创建方式：
- 对象字面量：通过{}

var info = {
	name: "jojo",
	age: 20,
	girfriend: {
		name: "小羊",
		age: 18,
	},
	running function() {
	console.log("running~")
	}
}

-  **new Object+动态添加属性**
- **new 其他类**

属性之间以 逗号分割
使用过程的操作：
- 访问对象的属性![[Pasted image 20240517224021.png]]
- 修改对象的属性![[Pasted image 20240517224030.png]]
- 添加对象的属性![[Pasted image 20240517224039.png]]
- 删除对象的属性：delete![[Pasted image 20240517224050.png]]
方括号
- 出现JavaScript无法理解的属性时，我们需要使用方括号![[Pasted image 20240517224435.png]]

对象的遍历

Objectkey() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组
遍历方式一：普通for循环![[Pasted image 20240517230541.png]]
遍历方式二：for in循环![[Pasted image 20240517230606.png]]

栈内存和堆内存

原始类型占据的空间是在栈内存中分配的
对象类型占据的空间是在堆内存中分配的
原始类型在变量中保存的是值本身
对象类型在变量中保存的是对象的”引用“![[Pasted image 20240518155438.png]]
5个现象：
现象一：两个对象的比较

var obj1 = {}
var obj2 = {}
console.log(obj1 === obj2)
//答案为false

现象二：引用的赋值

var info = {
	name: "why",
	friend: {
		name: "kobe"
	}
}
var friend = info.friend
friend.name = "james"
console.log(info.friend.name)
//答案为James

现象三：值传递

function foo(a) {
	a = 200
}
var num = 100
foo(num)
console.log(num)
//答案为100

现象四：引用传递，但是在函数中创建了一个新对象，没有对传入对象进行修改

function foo(a) {
	a = {
		name: "why"
	}
}
var obj = {
	name: "obj"
}
foo(obj)
console.log(obj)
//答案为name: "obj"

现象五：引用传递，但是对传入的对象进行修改

function foo(a) {
	a.name = "why"
}

var obj = {
	name: "obj"
}
foo(obj)
console.log(obj)
//答案为name: "why"

this变量

this指向Windows

function fn () {
    console.log(this)   //Window
}
fn();

this指向调用的对象

let obj = {
    name:'zy',
    sayHi:function() {
        console.log(this)
    }
}
obj.sayHi() //obj   {name: "zy", sayHi: ƒ}

创建一系列对象

方法一：工厂函数
- 封装一个函数，在这个函数中创建一个对象，再重复调用这个函数
- 对象是Object类型

function createstudent(name, age, height, address) {
	var stu = {}
	stu.name = name
	stu.age = age
	stu.height = height
	stu.address = address

	stu.eating = function() {
		console.log(stu.name + "在吃东西")
	}
	return stu
}

var stu1 = creat("张三", 18, 1.66, "四川省")
var stu2 = creat("jojo", 20, 1.80, "四川省")

方法二：构造函数
- 也称之为 构造器，通常是我们在创建对象时会去调用的函数
- JavaScript中的 构造函数扮演了其他语言中类的角色
- 也是一个 普通函数，如果被new操作符来调用了，那么这个函数就是一个构造函数
- 如果一个函数被使用new操作符来调用了，会执行以下操作
  - 在内存中创建一个新的对象（空对象）
  - 这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性
  - 构造函数内部的this，会指向创建出来的新对象
  - 执行函数的内部代码
  - 如果构造函数没有返回非空对象，则返回创建出来的新对象
- 对象是构造的函数类型
- 名称：使用大驼峰

function Student(name, age, height) {
	this.name = name
	this.age = age
	this.height = height
	this.eating = function() {
		console.log(this.name + "在吃东西")
	}

var stu1 = new Student("jojo", 20, 1.80)
}

全局对象-window

作用：

查找变量时，最终会找到window头上
将一些浏览器全局提供给我们的变量/函数/对象，放在window对象上面
使用var定义的变量会被默认添加到window上面

JavaScript常见内置类

原始类型的包装类

JavaScript的原始类型 并非对象类型，JavaScript为了可以 使其获得属性和调用方法，对其封装了对应的包装类型
常见的包装类型：String、Number、Boolean、Symbol、Biglnt类型
我们也可以自己创建一个包装类的对象（但没必要）

var name1 = "why"
var name2 = new String("why")
console.log(typeof name1) //string
console.log(typeof name2) //object
console.log(name1 === name2) //false

注意事项：null、undefined没有任何方法，也没有对应的“对象包装类”

Math对象的使用

是一个 内置对象（不是一个构造函数）

Math常见的属性：
- Math.PI：圆周率
Math常见的方法：
- Math.floor：向下取整
- Math.ceil：向上取整
- Math.round：四舍五入取整
- Math.random：生成[0, 1) 的随机数
- Math.pow：返回x的y次幂
查看文档：数学 - JavaScript |MDN的 (mozilla.org)

var num = 3.14
console.log(Math.floor(num)) //3
console.log(Math.ceil(num)) //4
console.log(Math.round(num)) //3
// 生成5~50随机数
console.log(Math.floor(Math.random() * 45) + 5)

数组 - Array

一种有序的集合，可以通过索引来获取
创建数组的方式
- 方法一：![[Pasted image 20240520194120.png]]
- 方法二：![[Pasted image 20240520194244.png]]
- 在创建数组时，设置数组长度![[Pasted image 20240520194333.png]]
- 数组元素从0开始编号

数组的基本操作

访问数组中的元素
- 通过中括号[]访问
- arr.at(i):
  - 如果i >= 0，则与arr[i]完全相同
  - 如果i为负数，则会从数组的尾部向前数

var num = [123, 234, 345, 456]
    console.log(num[0]) //123
    console.log(num.at(0)) //123

    console.log(num[-1]) //undifined
    console.log(num.at(-1)) //456

    // 修改
    num[0] = 132

添加、删除元素
- 在数组的尾端添加或者删除元素
  - push在末端添加元素
  - pop在末端取出一个元素
- 在数组的首段添加或者删除元素（运行速度比尾端的添加、删除操作慢）
  - shift取出首段的一个元素，整个数组向前移动
  - unshift在首段添加元素，整个数组向后移动
- 在中间某个位置添加或者删除
  - arr.splice方法可以做所有事情（添加、删除和替换）
  - 语法结构：array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
    - 从 start位置开始，处理数组中的元素
    - deleteCount：要删除的元素个数，如果为0或者负数表示不删除
    - item1，item2，…：在添加元素时，需要添加的元素
  - 注意：这个方法会修改原数组

var num = [123, 234, 345, 456]

    // 尾插
    num.push(567, 678)
    console.log(num) // 123, 234, 345, 456, 567, 678

    // 尾删
    num.pop()
    console.log(num) // 123, 234, 345, 456, 567

    // 头插
    num.unshift(980, 789)
    console.log(num) // 980, 789, 123, 234, 345, 456, 567

    // 头删
    num.shift()
    console.log(num) // 789, 123, 234, 345, 456, 567

    // 中间删
    num.splice(1, 2) // 从索引为1开始，删除2个元素
    console.log(num) // 789, 345, 456, 567

    // 中间添加
    num.splice(1, 0, 205, 427) // 在索引为1的前面，添加元素
    console.log(num) // 789, 205, 427, 345, 456, 567

    // 中间即删除又添加（即替换元素）
    num.splice(1, 2, 654) // 从引为1开始，删除2个元素, 再添加元素
    console.log(num) // 789, 654, 345, 456, 567

length属性
- length属性用于获取数组的长度
  - 当我们修改数组的时候，length属性会自动更新
- length属性是可写的
  - 手动增加一个大于默认length的数值，那么会增加数组的长度
  - 减少它，数组就会被截断
  - 清空数组最简单的方法：arr.length = 0
数组的遍历
- 普通for循环遍历
- for..in遍历，获取到索引值
- for..of遍历，获取到每一个元素

var num = [123, 234, 345, 456]

    for (var i = 0; i < num.length; i++) {
      console.log(num[i])
    }

    for(var index in num) {
      console.log(index, num[index])
    }

    for(var item of num) {
      console.log(item)
    }

数组方法 - slice、cancat、jojin
- arr.slice：用于对数组进行截取，返回一个新的数组，不会对原数组进行操作
  - arr.slice([begin[, end]])
  - 包含begin元素不包含end元素
- arr.cancat：创建一个新数组，其中包含来自其他数组和其他项的值
  - var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
- arr.join：将一个数组的所有元素链接成一个字符串并返回
  - arr.join([separator])

var num = [123, 234, 345, 456]

    var num1 = num.slice(1, 3)
    console.log(num1) // 234、345

    var num2 = [12, 13, 14]

    var num3 = num.concat(num2)
    console.log(num3) // 123, 234, 345, 456, 12, 13, 14

    console.log(num.join("")) //123234345456(字符串)

查找元素
- arr.indexOf方法：查找某个元素的索引
  - arr.indexOf(searchElement[, fromIndex])
  - 从fromIndex开始查找，如果找到返回对应的索引，没有找到返回-1
  - 还有对应的从最后位置开始查找的lastIndexOf
- arr.includes方法：判断数组是否包含某个元素
  - arr.includes(valueToFind[, fromIndex])
  - 从索引from开始搜索item，如果找到返回true
- forEach：遍历整个数组
  - array.forEach(function(currentValue, index, arr), thisValue)
  - function(currentValue, index, arr): 必需。对数组中每个元素要执行的函数。该函数有以下三个参数:
    - currentValue: 必需。当前元素的值。
    - index: 可选。当前元素的索引值。
    - arr: 可选。当前元素所属的数组对象。
  - thisValue: 可选。传递给函数的值，用于 this 关键词。
  - forEach() 方法没有返回值,它只是对数组中的每个元素执行指定的操作。
- find：直接查找元素
  - array.find(function(currentValue, index, arr), thisValue)
  - function: 一个回调函数,用于测试数组的每个元素。
  - currentValue: 数组中正在处理的当前元素。
  - index(可选): 数组中正在处理的当前元素的索引。
  - arr(可选): 正在使用 find() 方法的数组本身。
  - thisValue(可选): 可以用来设置回调函数中的 this 值。
  - 如果在数组中找到满足条件的第一个元素,则返回该元素的值;否则返回 undefined
- findIndex：直接查找索引（用法与find类似）
  - array.findIndex(function(currentValue, index, arr), thisValue)
  - 如果在数组中找到满足条件的第一个元素,则返回该元素的索引;否则返回 -1。
排序
- sort：对数组进行排序，并且生成一个排序后的新数组
  - arr.sort([compareFunction])
  - compareFunction(a, b)<0, a排在b前面
  - compareFunction(a, b)>0, a排在b后面
- reverse：将数组中的元素进行倒置，并且返回该数组

var students = [3, 6, 1, 7]
var newStus = students.sort(function(items1, items2) {
	return items1 - items2 //升序 1, 3, 6, 7
	// return items2 - items1 降序 7， 6， 3， 1
})
var newStus = students.reverse() // 7, 1, 6, 3

时间

创建Date对象
- Date的构造函数
  - new Date()
  - new Date(value) (传入时间戳)
  - new Data(dataString)
  - new Data(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]])

var date1 = new Date() //当前时间
   var date2 = new Date(1000) //传入毫秒数，表示从1970-01-01 00:00:00 UTC 经过的毫秒数
   var date3 = new Date("2024-5-27")
   var date4 = new Date(2024, 05, 27, 21, 42, 00,000) //年月日时分秒毫秒
   console.log(date4)

![[Pasted image 20240527214831.png]]

dateString时间的表达方式
- 日期有两种表达方式：RFC 2822标准（默认打印时间格式）和 ISO 8601标准
- 转成ISO 8601标准：data.toISOString()
  - YYYY：年份，0000~9999
  - MM：月份，01~12
  - DD：日，01~31
  - T：分隔时间和日期，无特殊含义
  - HH：小时，00~24
  - mm：分钟，00~59
  - ss：秒，00~59
  - .sss：毫秒
  - Z：时区
从Data获取信息
- getFullYear()：获取年份（4位数）
- getMonth()：获取月份，从0~11
- getDate()：获取当月的具体日期，从1~31
- getHours()：获取小时
- getMinutes()：获取分钟
- getSeconds()：获取秒钟
- getMilliseconds()：获取毫秒
- getDat()：一周中的第几天（周日是0开始）
Data设置信息的方法
- **setFullYear(year, [month], [date])
- **setMonth(month, [date])
- **setDate(date)
- **setHours(hour, [min], [sec], [ms])
- **setMinutes(min, [sec], [ms])
- **setSeconds(sec, [ms])
- **setMilliseconds(ms)
- setTime(milliseconds)
Date获取Unix时间戳
- Unix时间戳：是一个整数值，表示从1970年1月1日00:00:00 UTC以来的毫秒数
- 获取时间戳：
  - new Date.getTime()
  - new Date.valueOf()
  - +new Date()
  - Date.now()
- 可以用时间戳来测试代码的性能
Date.parse方法
- Date.parse(str)方法可以从一个字符串中读取日期，并且输出对应的Unix时间戳
- 作用等同于 new Date(dateString).getTime()操作
- 需要符合RFC2822或ISO 8601日期格式的字符串
- 如果输入的格式不能被解析，会返回NaN

var date = new Date() //当前时间
   console.log(date)
   console.log(date.toISOString())
   // 获取时间信息
   var year = date.getFullYear()
   var month = date.getMonth() + 1
   var day = date.getDate()
   var hour = date.getHours()
   var minute = date.getMinutes()
   var second = date.getSeconds()
   console.log(year, month, day, hour, minute, second)
   console.log(`${year}/${month}/${day} ${hour}:${minute}:${second}`)

   // 给date设置时间
   date.setFullYear(2044)
   //自动校验
   date.setDate(32)
   console.log(date)

   var startTime = Date.now()
   for(var i = 0 ; i < 10000; i++) {
     console.log(i)
   }
   var endTime = Date.now()
   console.log(endTime - startTime)